<template>
    <!-- <div class="loginContainer">
        <div class="user">
            <el-form :model="user">
                <div class="userLoginTitle">
                    <h3 style="text-align:center">隧道信息管理系统登录</h3>
                </div>
                <el-form-item prop="userName">
                    <el-input :prefix-icon="User" v-model="user.userName" placeholder="请输入用户名" name="userName" />
                </el-form-item>
                <el-form-item prop="userPassword">
                    <el-input :prefix-icon="Lock" type="password" v-model="user.userPassword" placeholder="请输入密码" name="userPassword" />
                </el-form-item>
                <el-button type="primary" style="display: block; width:90%;margin:10px auto;margin-bottom: 30px;"
                    class="userButton" @click.native.prevent="clickLogin">登录</el-button>
            </el-form>
        </div>

    </div> -->

    <div class="login-container">
        <el-form class="user" size="large" :model="user">
            <div class="title-container">
                <h3 class="title">隧道后台管理系统登录</h3>
            </div>
            <el-form-item prop="username">
                <el-input :prefix-icon="User" v-model="user.userName" type="text" placeholder="请输入用户名"
                    name="userName"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" type="password" v-model="user.userPassword" placeholder="请输入密码"
                    name="userPassword"></el-input>
            </el-form-item>
            <el-button style="width:100%;margin-bottom:30px;" type="primary"
                @click.native.prevent="handleLogin">登录</el-button>
        </el-form>
    </div>
</template>

<style scoped>
/* .loginContainer {
    width: 100%;
    height: 100%;
    background-color: aqua;
}

.user {
    width: 400px;
    position: relative;
    padding: 160px 35px 0;
    margin: 0 auto;
} */
.login-container {
    width: 100%;
    height: 100%;
    background-color: #2d3a4b;
}

.user {
    position: relative;
    width: 400px;
    padding: 160px 35px 0;
    margin: 0 auto;
}

.title-container .title {
    font-size: 30px;
    color: #fff;
    text-align: center;
    margin: 20px;
}
</style>

<script setup>
import { ref, reactive } from 'vue';
// import api from '@/api/index.js';
import api from '../../API/index'
import { userLoginStore } from '../../stores/loginStore'
import { useRouter } from 'vue-router'
import {User,Lock} from '@element-plus/icons-vue'

// 创建登录仓库
const loginStore = userLoginStore();

// 获取路由对象
const router = useRouter();

// 声明用户信息
const user = reactive({
    userName: "",
    userPassword: ""
})

// 点击登录
const handleLogin = () => {
    console.log(user);
    api.getLogin({
        userName: user.userName,
        userPassword: user.userPassword
    }).then(res => {
        console.log(res.data);
        if (res.data.status === 200) {
            loginStore.token = res.data.token
            loginStore.username = res.data.username
            loginStore.permission = res.data.permission
            router.push("/")
        } else {
            // 失败给出用户提示
            ElMessage.error(res.data.msg)
        }
    })
}
</script>